<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="120px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList">搜索</el-button>
				<el-button type="text" @click="importHandle">导出excel</el-button>
			</div>
			<el-form-item label="查询时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="订单状态">
				<el-select size="small" v-model="queryParams.orderState" multiple placeholder="请选择订单状态" filterable
					clearable>
					<el-option v-for="item in orderStateList" :key="item.id" :label="item.label" :value="item.value"
						@change="changeClass">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="组织选择">
				<el-select size="small" v-model="queryParams.unitCount" multiple placeholder="请选择组织名称" filterable
					clearable>
					<el-option v-for="item in unitCountList" :key="item.id" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<div style="font-size: 12px;color:	#AAAAAA">注：根据重新调整组织列表统计订单金额，默认显示最近一个月所有数据，若想筛选订单状态请在订单状态中选择</div>
			</el-form-item>
		</el-form>
		<el-form inline style="border-top:1.5px dotted  #e1e1e1;padding-top: 10px;">
			<el-form-item label="现有组织金额(本页展示的组织销售金额)" class="grid-content" style="color:#ff0400;">:
				{{ '\xa0'+ this.sum2 }} 元</el-form-item>
			<el-form-item label="其他组织金额" class="grid-content" style="color:#a61e06;">: {{ '\xa0'+ this.sum3 }} 元
			</el-form-item>
			<el-form-item label="总金额" class="grid-content" style="color:#a61e06;">:{{ '\xa0'+ this.yearCount }} 元
			</el-form-item>
		</el-form>

		<div class="wer">
			<el-table :span-method="cellMerge" :data="list" border :cell-style="{padding: '17px 0px'}" height="calc(100vh - 450px)">
				<el-table-column label="序号" width="50" fixed="left">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column label="组织总称" align="center" prop="unitCount1" width="220px"></el-table-column>
				<el-table-column label="组织名称" align="center" prop="unitName" width="380px"></el-table-column>
				<el-table-column label="总金额" align="center" prop="sum"></el-table-column>
				<el-table-column label="组织总金额" align="center" prop="sumsum"  width="150px"></el-table-column>

			</el-table>
		</div>


		<div style="margin: 20px;">共{{this.total}}条数据</div>
		<!-- <pagination v-show="total > 0" :total="total" @pagination="getList" /> -->
	</div>
</template>

<script>
	import {
		getpurchaseBuyCount,
		getpurchaseBuyCountOut,
		getYearBuy
	} from "@/api/leader/leaderapi";
	export default {
		name: "",
		// 页面数据
		data() {
			return {
				queryParams: {
					// pageNum: 1, // 显示第一页数据
					// pageSize: 15, //每页显示十条
					beginTime: "",
					endTime: "",
					orderState: [],
					unitCount: []
				},
				orderStateList: [{
					value: "A1003",
					label: "提交订单"
				}, {
					value: "A1102",
					label: "已完成"
				}, {
					value: "A1101",
					label: "等待收货"
				}, {
					value: "A1002",
					label: "预占订单"
				}],
				unitCountList: [{
					value: "矿业",
					label: "矿业"
				}, {
					value: "攀钢",
					label: "攀钢"
				}, {
					value: "本钢",
					label: "本钢"
				}, {
					value: "鞍山钢铁",
					label: "鞍山钢铁"
				}, {
					value: "集团+其他板块",
					label: "集团+其他板块"
				}],
				list: [],
				mergerItems: [{
					columnIndex: 4,
					spanArr: [],
					pos: 0,
					prop: 'sumsum'
				}],
				yearCount: '',
				sum2: '', //现有总金额
				sum3: '', //其他总金额
				total: 0, // 一共多少条数据
				timeModel: []
			};
		},
		// 初始化
		mounted() {
			this.getList();

		},
		// 函数集合
		methods: {
			cellMerge({
				row,
				column,
				rowIndex,
				columnIndex
			}) { //表格合并的方法
				if (columnIndex === 4) { //这里判断第几列需要合并
					let item = this.mergerItems.find(item => item.columnIndex === columnIndex)
					const _row = item.spanArr[rowIndex];
			  const _col = _row > 0 ? 1 : 0;
					return {
						rowspan: _row,
						colspan: _col,
			 	}
				}
			},
			getSpanArr(data, array) { //循环数据处理
				for (let n = 0; n < array.length; n++) {
					array[n].spanArr = [] //数据清空(重新调此方法的时候需要清空上一次的数据)
					for (let i = 0; i < data.length; i++) {
						if (i === 0) {
							array[n].spanArr.push(1);
							array[n].pos = 0;
						} else {
							// 判断当前元素与上一个元素是否相同
							if (data[i][array[n].prop] === data[i - 1][array[n].prop]) {
								array[n].spanArr[array[n].pos] += 1;
								array[n].spanArr.push(0);
							} else {
								array[n].spanArr.push(1);
								array[n].pos = i;
							}
						}
					}
				}
			},

			getList() {
				//传入订单详情和分页数据
				console.log('77')
				if (this.timeModel == null || this.timeModel.length == 0) {
					this.queryParams.beginTime = ""
					this.queryParams.endTime = ""
				} else {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}

				let params = {
					orderState: this.queryParams.orderState,
					unitCount: this.queryParams.unitCount,
					// pageNum: this.queryParams.pageNum,
					// pageSize: this.queryParams.pageSize,
					beginTime: this.queryParams.beginTime,
					endTime: this.queryParams.endTime,
				};
				getpurchaseBuyCount(params).then(res => {
					this.list = res.rows
					this.total = res.total
					this.getSpanArr(this.list, this.mergerItems)
					console.log('95', this.mergerItems)
					// 计算数组总金额
					let sum2 = 0
					for (let i = 0; i < this.list.length; i++) {
						sum2 += Number(this.list[i].sum)
						this.sum2 = sum2.toFixed(2)
						this.sum3 = (parseInt(this.yearCount * 10000) - parseInt(this.sum2 * 10000)) / 10000
					}
				})

				getYearBuy(params).then(res => {

					this.yearCount = res[0].sum
					console.log("120", this.yearCount)

				})

			},

			// 保存下载文件
			saveAs(blob, filename) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, filename)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = filename
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 导出订单
			importHandle() {
				if (this.timeModel) {
					this.queryParams.beginTime = this.timeModel[0]
					this.queryParams.endTime = this.timeModel[1]
				}
				let newSearch = {
					beginTime: this.queryParams.beginTime ? this.queryParams.beginTime : '',
					endTime: this.queryParams.endTime ? this.queryParams.endTime : '',
					orderState: this.queryParams.orderState ? this.queryParams.orderState : '',
				}
				getpurchaseBuyCountOut(newSearch).then((res) => {
					let blob = new Blob([res], {
						type: 'application/vnd.ms-excel'
					})
					this.saveAs(blob, '各组织采购统计.xls')
				})
			}
			// changeClass() {
			// 	console.log('96', this.queryParams.orderClass)
			// }

		}
	}
</script>

<style>
	.wer {
		padding: 10px 210px;
	}
</style>
